import React from 'react'
import  PropTypes from 'prop-types'
import {setFilter} from '../action'
import { connect } from 'react-redux'
const Link = ({active, children, onClick_}) => {
  if (active) {
    return <b className="filter selected">{children}</b>
  } else {
    return (<a href="#" className="filter not-selected" onClick={ev => {
      ev.preventDefault()
      onClick_()
    }}>
      {children}
    </a>)
  }
}
Link.propTypes = {
  active: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired,
  onClick_: PropTypes.func.isRequired
}

const mapStateToProps = (state, ownProps) => {
  return {
    active: state.filter === ownProps.filter
  }
}
const mapDispatchProps = (dispatch, ownProps) => {
  return {
      onClick_: () => {
      dispatch(setFilter(ownProps.filter))
    }
  }
}
export default connect(mapStateToProps, mapDispatchProps)(Link)
